<template>
  <div class="sjplatformAdd">
    <el-form label-width="100px">
      <el-form-item label="名称：">
        <el-input v-model="authorityStore.authorityModel.authorityName" />
      </el-form-item>
      <el-form-item label="上级权限：">
        <el-tree-select
          v-model="authorityStore.authorityModel.pName"
          :data="authorityTable.authorityTreeData"
          check-strictly
          :render-after-expand="false"
          @node-click="handleAuthorityNodeClick"
          placeholder="请选择..."
        />
      </el-form-item>
      <el-form-item label="权限类型：">
        <el-select
          v-model="authorityStore.authorityModel.authorityType"
          clearable
          placeholder="请选择..."
        >
          <el-option label="菜单" :value="1" />
          <el-option label="按钮" :value="2" />
        </el-select>
      </el-form-item>
      <el-form-item
        label="菜单："
        v-if="authorityStore.authorityModel.authorityType == 1"
      >
        <el-tree-select
          v-model="authorityStore.authorityModel.menuName"
          :data="data"
          check-strictly
          :render-after-expand="false"
          @node-click="handleMenuNodeClick"
          placeholder="请选择..."
        />
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { useMenuTree } from "../../../hooks/SystemManager/Menu/useMenuTree";
import { useAuthorityTable } from "../../../hooks/SystemManager/Authority/useAuthorityTable";

let { data, menuStore, fetchData } = useMenuTree();
fetchData();

let { authorityTable, authorityStore, queryData, fetchMenuAuthorityData } =
  useAuthorityTable(1, 10);
fetchMenuAuthorityData();

function handleMenuNodeClick(node) {
  authorityStore.authorityModel.menuId = node.id;
  authorityStore.authorityModel.menuName = node.label;
}
function handleAuthorityNodeClick(node) {
  authorityStore.authorityModel.pid = node.id;
  authorityStore.authorityModel.pName = node.label;
}
</script>